import React, { Component } from 'react';
import classNames from 'classnames';
import RiskSlider from '../riskslider/RiskSlider';
import { Scroll, ModalOpenButton, SelectItemList, SelectItem } from '../common-ui-parts';
import { SimulationItemConstant as SiC } from '../../constants/InputItemConstants';
import CommonConstants from '../../constants/CommonConstants';
import AlcoholAmount from '../simulation-modal/AlcoholAmount';
import ExerciseHabit from '../simulation-modal/ExerciseHabit';
import HeadLine, { HEAD_LINE_COLOR } from '../common-ui-parts/HeadLine';
import { validateAll } from '../../validations/';
import { SingleValidation, MultipleValidation, MultipleValidationCategory } from '../../validations/SimulationValidation';
import ErrorMessage from '../common-ui-parts/ErrorMessage';

/**
 * シミュレーション：大腸がん
 */
class Simulation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      openModal: undefined,
      viewInputData: props.inputData,
      errorMsg: undefined,
    }
  }

  // 画面内入力項目の反映
  _calcRisk = (name, value) => {
    const { viewInputData } = this.state;
    // 入力項目チェック
    const errorInfo = validateAll({ ...viewInputData, [name]: value }, SingleValidation, MultipleValidation);
    this.setState({ viewInputData: { ...viewInputData, [name]: value }, errorMsg: errorInfo.get(MultipleValidationCategory.BMI) },
      () => {
        if (errorInfo.ok) {
          this.props.onCalcRisk(this.state.viewInputData);
        }
      }
    );
  }

  // モーダル内入力項目の反映
  _calcRiskForModal = ({ isOk, modalInputData }) => {
    // OKでモーダルを閉じた場合
    if (isOk) {
      // 飲酒モーダルと運動習慣モーダルは入力項目チェック不要
      this.props.onCalcRisk(modalInputData);
    }
    this.setState({ openModal: undefined, viewInputData: modalInputData, errorMsg: undefined });
  }

  _openModal = (name) => {
    this.setState({ openModal: name });
  }

  scrollTop() {
    this.refs.scrollArea.scrollTop();
  }

  render() {
    const { inputData, risk, initialRisk, healthy } = this.props;
    const errorText = this.state.errorMsg;

    return (
      <div className="Simulation">
        <RiskSlider
          current={Number(risk.probability.you)}
          initial={Number(initialRisk.probability.you)}
          min={Number(initialRisk.probability.min)}
          max={Number(initialRisk.probability.max)}
        />
        {/* エラーメッセージ */}
        {errorText && errorText.length > 0
          ? <div className="message-area">
            <ErrorMessage message={errorText} style={{ bottom: '-30px', left: '10%' }} />
          </div>
          : null}
        {/* 飲酒習慣用モーダル */}
        <AlcoholAmount
          open={this.state.openModal === CommonConstants.ALCOHOL_AMOUNT_CHANGE}
          modalInputData={inputData}
          modalCallBack={this._calcRiskForModal}
        />
        {/* 運動習慣用モーダル */}
        <ExerciseHabit
          open={this.state.openModal === CommonConstants.EXERCISE_HABIT_CHANGE}
          modalInputData={inputData}
          modalCallBack={this._calcRiskForModal}
        />
        <Scroll
          ref="scrollArea"
          fixedHeight={CommonConstants.SCROLL_FIXED_HIGHT.SIMULATION}
          customStyle={CommonConstants.SCROLL_Z}
        >
          {/* あなた(現状) */}
          <div className="report-card">
            <div className="card-content">
              <p className="guidance-simulation">
                以下の選択可能な項目を変更することで、リスクがどのくらい変動するか確認いただけます。
              </p>
              <HeadLine
                level={2}
                others={{ style: { paddingTop: '37px' } }}
              >
                あなた&nbsp;{risk.probability.you.toFixed(CommonConstants.DECIMAL_DIGIT)}%
              </HeadLine>
              {/* 性別 */}
              <dl className="simulation-content">
                <dt>{SiC.GENDER.label}</dt>
                <dd>{SiC.GENDER.getLabel(inputData.gender)}</dd>
              </dl>
              {/* 年齢 */}
              <dl className="simulation-content">
                <dt>{SiC.AGE.label}</dt>
                <dd>{SiC.AGE.getLabel(inputData.age)}</dd>
              </dl>
              {/* 身長 */}
              <dl className="simulation-content">
                <dt>{SiC.BODY_HEIGHT.label}</dt>
                <dd>{SiC.BODY_HEIGHT.getLabel(inputData.bodyHeight)}</dd>
              </dl>
              {/* 体重 */}
              <dl className="simulation-content">
                <dt>{SiC.BODY_WEIGHT.label}</dt>
                <dd>
                  <SelectItemList
                    name={SiC.BODY_WEIGHT}
                    value={this.state.viewInputData[SiC.BODY_WEIGHT]}
                    propagate={(name, value) => this._calcRisk(name, value)}
                  >
                    {SiC.BODY_WEIGHT.choices.map((choice, index) => (
                      <SelectItem key={index} value={choice.value} label={choice.label} />
                    ))}
                  </SelectItemList>
                </dd>
              </dl>
              {/* 喫煙習慣 */}
              <dl className="simulation-content">
                <dt>{SiC.SMOKING_HABIT.label}</dt>
                <dd>
                  <SelectItemList
                    name={SiC.SMOKING_HABIT}
                    value={inputData[SiC.SMOKING_HABIT]}
                    propagate={this._calcRisk}
                  >
                    {SiC.SMOKING_HABIT.choices.map((choice, index) => (
                      <SelectItem key={index} value={choice.value} label={choice.label} />
                    ))}
                  </SelectItemList>
                </dd>
              </dl>
              {/* 飲酒 */}
              <dl className="simulation-content">
                <dt>飲酒</dt>
                <dd>{/* ダミー */}</dd>
              </dl>
              <div style={{ margin: '15px 0 20px 0' }}>
                <table className="report-table simulation-table">
                  <tbody>
                    <tr>
                      <th style={{ width: '45%' }}>飲酒頻度</th>
                      <td style={{ width: '55%' }}>{SiC.ALCOHOL_FREQUENCY.getLabel(inputData.alcoholFrequency)}</td>
                    </tr>
                    <tr>
                      <th>ビール<br />発泡酒</th>
                      <td>{SiC.ALCOHOL_AMOUNT_BEER.getLabel(inputData.alcoholAmountBeer)}</td>
                    </tr>
                    <tr>
                      <th>ワイン</th>
                      <td>{SiC.ALCOHOL_AMOUNT_WINE.getLabel(inputData.alcoholAmountWine)}</td>
                    </tr>
                    <tr>
                      <th>日本酒</th>
                      <td>{SiC.ALCOHOL_AMOUNT_SAKE.getLabel(inputData.alcoholAmountSake)}</td>
                    </tr>
                    <tr>
                      <th>焼酎<br />泡盛</th>
                      <td>{SiC.ALCOHOL_AMOUNT_SHOCHU.getLabel(inputData.alcoholAmountShochu)}</td>
                    </tr>
                    <tr>
                      <th>ウィスキー<br />ブランデー</th>
                      <td>{SiC.ALCOHOL_AMOUNT_WHISKEY.getLabel(inputData.alcoholAmountWhiskey)}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div className="simulation-sub-content">
                <ModalOpenButton
                  label={'お酒の飲み方を見直す'}
                  onTouchTap={() => this._openModal(CommonConstants.ALCOHOL_AMOUNT_CHANGE)}
                />
              </div>
              {/* 運動 */}
              <dl className="simulation-content spaceLeft">
                <dt>運動習慣(1日について)</dt>
                <dd/>
              </dl>
              <div style={{ margin: '15px 0 20px 0' }}>
                <table className="report-table simulation-table">
                  <tbody>
                    <tr>
                      <th style={{ width: '45%' }}>座っている時間</th>
                      <td style={{ width: '55%' }}>{SiC.EXERCISE_TIME_SITTING.getLabel(inputData.exerciseTimeSitting)}</td>
                    </tr>
                    <tr>
                      <th>立ったり歩いたり<br />している時間</th>
                      <td>{SiC.EXERCISE_TIME_STANDING.getLabel(inputData.exerciseTimeStanding)}</td>
                    </tr>
                    <tr>
                      <th>肉体労働やスポ<br />ーツをする時間</th>
                      <td>{SiC.EXERCISE_TIME_LABORING.getLabel(inputData.exerciseTimeLaboring)}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div className="simulation-sub-content">
                <ModalOpenButton
                  label={'運動習慣を見直す'}
                  onTouchTap={() => this._openModal(CommonConstants.EXERCISE_HABIT_CHANGE)}
                />
              </div>
            </div>
            <div className="card-content">
              <HeadLine
                level={2}
                color={HEAD_LINE_COLOR.GREEN}
                others={{ style: { paddingTop: '70px' } }}
              >
                健康なグループ&nbsp;{risk.probability.min.toFixed(CommonConstants.DECIMAL_DIGIT)}%
              </HeadLine>
              {healthy.good.map((item, index) => (
                <dl key={index} className={classNames('simulation-content', {
                  'sample-data sample-label': item.isSample,
                  'vertical-dl': Array.isArray(item.value),
                })}>
                  <dt>{item.label}</dt>
                  {Array.isArray(item.value)
                    ? <dd>
                      <table className="report-table simulation-table">
                        <tbody>
                          {item.value.map((child, idx) => (
                            <tr key={idx}>
                              <th style={{ width: '45%' }}><span dangerouslySetInnerHTML={{ __html: child.label }} /></th>
                              <td style={{ width: '55%' }}>{child.value}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </dd>
                    : <dd>{item.value}</dd>
                  }
                </dl>
              ))}
            </div>
            <div className="card-content" style={{ marginBottom: '40px' }}>
              <HeadLine
                level={2}
                color={HEAD_LINE_COLOR.RED}
                others={{ style: { paddingTop: '67px' } }}
              >
                不健康なグループ&nbsp;{risk.probability.max.toFixed(CommonConstants.DECIMAL_DIGIT)}%
              </HeadLine>
              {healthy.bad.map((item, index) => (
                <dl key={index} className={classNames('simulation-content', {
                  'sample-data sample-label': item.isSample,
                  'vertical-dl': Array.isArray(item.value),
                })}>
                  <dt key={index}>{item.label}</dt>
                  {Array.isArray(item.value)
                    ? <dd>
                      <table className="report-table simulation-table">
                        <tbody>
                          {item.value.map((child, idx) => (
                            <tr key={idx}>
                              <th style={{ width: '45%' }}><span dangerouslySetInnerHTML={{ __html: child.label }} /></th>
                              <td style={{ width: '55%' }}>{child.value}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </dd>
                    : <dd>{item.value}</dd>
                  }
                </dl>
              ))}
            </div>
          </div>
        </Scroll>
      </div>
    )
  }
}
/*
Simulation.propTypes = {
  inputData: React.PropTypes.object.isRequired,
  risk: React.PropTypes.shape({
    probability: React.PropTypes.shape({
      you: React.PropTypes.number.isRequired,
      ave: React.PropTypes.number.isRequired,
      min: React.PropTypes.number.isRequired,
      max: React.PropTypes.number.isRequired,
    }),
  }),
  initialRisk: React.PropTypes.shape({
    probability: React.PropTypes.shape({
      you: React.PropTypes.number.isRequired,
      ave: React.PropTypes.number.isRequired,
      min: React.PropTypes.number.isRequired,
      max: React.PropTypes.number.isRequired,
    }),
  }),
  onCalcRisk: React.PropTypes.func.isRequired,
  openModal: React.PropTypes.bool,
  healthy: React.PropTypes.shape({
    good: React.PropTypes.array,
    bad: React.PropTypes.array,
  }),
};*/

export default Simulation
